<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="zw.ico">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>testDemo</title>
<link rel="stylesheet" type="text/css" href="../../../theme/ztree/3.5.12/zTreeStyle/zTreeStyle.css"/>
<script src='jquery-1.4.4.min.js' type="text/javascript"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="jquery.ztree.excheck-3.5.js"></script>
<style type="text/css">
html,body{
	width: 1200px;
	margin: 0 auto;
	background-color: #f0f0f0;
	font-size: 12px;
}

.zui .ztree li span.button.switch {
	display: none;
}
/**
 * 左侧margin
**/
.zui .ztree li ul {
	margin-left: 19px;
}
/**
 * 不选中
**/
.zui .ztree li span.button.chk.checkbox_false_full, .ztree li span.button.chk.checkbox_false_full_focus {
	background: url(apply_add.png) no-repeat -3px -22px;
	width: 18px;
	height: 18px;
}
/**
 * 半选中/js触发半选中
**/
.zui .ztree li span.button.chk.checkbox_true_part, .ztree li span.button.chk.checkbox_true_part_focus, .ztree li span.button.chk.checkbox_false_part, .ztree li span.button.chk.checkbox_false_part_focus {
	background: url(apply_add.png) no-repeat -3px -62px;
	width: 18px;
	height: 18px;
}

/**
 * 选中
**/
.zui .ztree li span.button.chk.checkbox_true_full, .ztree li span.button.chk.checkbox_true_full_focus {
	background: url(apply_add.png) no-repeat -3px -42px;
	width: 18px;
	height: 18px;
}

/**
 * 折叠打开
**/
.zui .ztree li span.button.ico_open, .ztree li span.button.ico_close {
	background: url(apply_add.png) no-repeat 0 0;
}
.zui .ztree li span.button.ico_open{
	background-position: -5px -122px;
	width: 16px;
	height: 16px;
}
.zui .ztree li span.button.ico_close{
	background-position: -5px -104px;
	width: 16px;
	height: 16px;
}

/**
 * 二级菜单icon
**/
.zui .ztree li span.button.ico_docu{
	background-image: none;
	width: 0;
}

.zui .ztree li {
	padding: 1px 0;
}
.ztree li a:hover {
	text-decoration: none;
}
</style>
</head>
<body>

<div class="zui">
    <ul id="treeDemo" class="ztree"></ul>
</div>

<button>切换选中2-2</button>

<script type="text/javascript">
$(function(){

	var setting = {  
		view: {
			dblClickExpand: false, //去除双击事件，单击展开收缩
			showLine: false //不显示虚线
		},
        check: {  
            enable: true  //是否启用 复选框  
        },  
        data: {  
            simpleData: {  
                enable: true  
            }  
        },
		callback: {
			beforeClick: zui_beforeClick
		}
    };  
    var zNodes =[  
        { id:1, pId:0, name:"随意勾选 1", open:true}, //pId 的 值就是上一级的id值  
        { id:11, pId:1, name:"随意勾选 1-1", open:true},  
        { id:12, pId:1, name:"随意勾选 1-2", open:true},  
        { id:2, pId:0, name:"随意勾选 2", open:true},  
        { id:21, pId:2, name:"随意勾选 2-1"},  
        { id:22, pId:2, name:"随意勾选 2-2", open:true},  
        { id:23, pId:2, name:"随意勾选 2-3"}  
    ];  
      
    function zui_beforeClick(treeId, treeNode) {
    	console.log(treeNode.id)
    	$.fn.zTree.getZTreeObj(treeId).expandNode(treeNode, null, true);
    	return false;
	}

    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    $("button").click(function(){
    	var id = '22';
    	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    	var node = treeObj.getNodeByParam("id", id, null);
    	treeObj.checkNode(node, null, false);
    })

});

</script>
</body>
</html>